<script setup lang="ts">
import { ref, computed } from 'vue'
import { showImagePreview } from 'vant'
import { useWindowSize } from '@vueuse/core'

const { width } = useWindowSize()
const active = ref(0)
const images = ref(['banner1.jpg', 'banner2.jpg', 'banner3.png'])
const qualityGoodsList = ref([
  {
    id: 1,
    tag: '',
    price: '99.00',
    desc: '描述信息',
    title: '微信小程序',
    image: 'wx.jpg',
    originPprice: '129.00'
  },
  {
    id: 2,
    tag: '热门',
    price: '19.00"',
    desc: '描述信息',
    title: '快应用',
    image: 'quickAPP.jpg',
    originPprice: '39.00'
  },
  {
    id: 3,
    tag: '',
    price: '0.00',
    desc: '描述信息',
    title: 'JavaScript',
    image: 'js.jpg',
    originPprice: '10.00'
  },
  {
    id: 4,
    tag: '',
    price: '99.00',
    desc: '描述信息',
    title: '微信小程序',
    image: 'wx.jpg',
    originPprice: '129.00'
  },
  {
    id: 5,
    tag: '热门',
    price: '19.00"',
    desc: '描述信息',
    title: '快应用',
    image: 'quickAPP.jpg',
    originPprice: '39.00'
  },
  {
    id: 6,
    tag: '',
    price: '0.00',
    desc: '描述信息',
    title: 'JavaScript',
    image: 'js.jpg',
    originPprice: '10.00'
  }
])
const explosiveGoodsList = ref([
  {
    id: 1,
    tag: '热门',
    price: '19.00"',
    desc: '描述信息',
    title: '快应用',
    image: 'quickAPP.jpg',
    originPprice: '39.00'
  },
  {
    id: 2,
    tag: '',
    price: '99.00',
    desc: '描述信息',
    title: '微信小程序',
    image: 'wx.jpg',
    originPprice: '129.00'
  },

  {
    id: 3,
    tag: '',
    price: '0.00',
    desc: '描述信息',
    title: 'JavaScript',
    image: 'js.jpg',
    originPprice: '10.00'
  },
  {
    id: 4,
    tag: '热门',
    price: '19.00"',
    desc: '描述信息',
    title: '快应用',
    image: 'quickAPP.jpg',
    originPprice: '39.00'
  },
  {
    id: 5,
    tag: '',
    price: '99.00',
    desc: '描述信息',
    title: '微信小程序',
    image: 'wx.jpg',
    originPprice: '129.00'
  },

  {
    id: 6,
    tag: '',
    price: '0.00',
    desc: '描述信息',
    title: 'JavaScript',
    image: 'js.jpg',
    originPprice: '10.00'
  }
])
const discountsList = ref([
  {
    id: 1,
    tag: '',
    price: '0.00',
    desc: '描述信息',
    title: 'JavaScript',
    image: 'js.jpg',
    originPprice: '10.00'
  },
  {
    id: 2,
    tag: '',
    price: '99.00',
    desc: '描述信息',
    title: '微信小程序',
    image: 'wx.jpg',
    originPprice: '129.00'
  },
  {
    id: 3,
    tag: '热门',
    price: '19.00"',
    desc: '描述信息',
    title: '快应用',
    image: 'quickAPP.jpg',
    originPprice: '39.00'
  },
  {
    id: 4,
    tag: '',
    price: '0.00',
    desc: '描述信息',
    title: 'JavaScript',
    image: 'js.jpg',
    originPprice: '10.00'
  },
  {
    id: 5,
    tag: '',
    price: '99.00',
    desc: '描述信息',
    title: '微信小程序',
    image: 'wx.jpg',
    originPprice: '129.00'
  },
  {
    id: 6,
    tag: '热门',
    price: '19.00"',
    desc: '描述信息',
    title: '快应用',
    image: 'quickAPP.jpg',
    originPprice: '39.00'
  }
])
const imagesUrl = computed(() => images.value.map((item) => getImageUrl(item)))

const getImageUrl = (name: string) => {
  return new URL(`../../assets/${name}`, import.meta.url).href
}

const onClickImg = (index: number) => {
  showImagePreview({ images: imagesUrl.value, startPosition: index })
}
</script>

<template>
  <div class="home-page">
    <van-nav-bar :border="false" :fixed="true" :placeholder="true">
      <template #left>
        <img class="logo" src="../../assets/logo.png" alt="" />
      </template>
      <template #right>
        <van-icon name="search" size="25" />
      </template>
    </van-nav-bar>
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item
        v-for="(image, index) in images"
        :key="image"
        @click="onClickImg(index)"
      >
        <img class="swipe" :src="getImageUrl(image)" />
      </van-swipe-item>
    </van-swipe>
    <div class="course">
      <van-grid :border="false">
        <van-grid-item :icon="getImageUrl('jiuyeke.png')" text="就业课" to="" />
        <van-grid-item
          :icon="getImageUrl('tishengke.png')"
          text="提升课"
          to=""
        />
        <van-grid-item
          :icon="getImageUrl('mainfeike.png')"
          text="免费课"
          to=""
        />
        <van-grid-item
          :icon="getImageUrl('courseType.png')"
          text="课程分类"
          to=""
        />
      </van-grid>
    </div>
    <van-notice-bar scrollable mode="closeable"
      >前端与移动开发就业班课程【全面更新】！等待您的到来哦！</van-notice-bar
    >
    <van-cell
      icon="location-o"
      title="就业课"
      value="更多"
      is-link
      :border="false"
    ></van-cell>
    <div class="classification">
      <van-grid :column-num="3" :border="false" center>
        <van-grid-item to="">
          <van-image round :src="getImageUrl('fe-list.png')" />
        </van-grid-item>
        <van-grid-item to="">
          <van-image round :src="getImageUrl('python.png')" />
        </van-grid-item>
        <van-grid-item to="">
          <van-image round :src="getImageUrl('wx.jpg')" />
        </van-grid-item>
        <van-grid-item to="">
          <van-image round :src="getImageUrl('data.png')" />
        </van-grid-item>
        <van-grid-item to="">
          <van-image round :src="getImageUrl('ui.png')" />
        </van-grid-item>
        <van-grid-item to="">
          <van-image round :src="getImageUrl('java.png')" />
        </van-grid-item>
      </van-grid>
    </div>
    <van-tabs
      v-model:active="active"
      line-width="65px"
      color="#3a64df"
      title-active-color="#3a64df"
      sticky
      :offset-top="(46 / 375) * width"
      :border="true"
    >
      <van-tab title="精品">
        <van-card
          :tag="item.tag"
          :price="item.price"
          :desc="item.desc"
          :title="item.title"
          :thumb="getImageUrl(item.image)"
          :origin-price="item.originPprice"
          v-for="item in qualityGoodsList"
          :key="item.id"
        />
      </van-tab>
      <van-tab title="爆品">
        <van-card
          :tag="item.tag"
          :price="item.price"
          :desc="item.desc"
          :title="item.title"
          :thumb="getImageUrl(item.image)"
          :origin-price="item.originPprice"
          v-for="item in explosiveGoodsList"
          :key="item.id"
        />
      </van-tab>
      <van-tab title="优惠">
        <van-card
          :tag="item.tag"
          :price="item.price"
          :desc="item.desc"
          :title="item.title"
          :thumb="getImageUrl(item.image)"
          :origin-price="item.originPprice"
          v-for="item in discountsList"
          :key="item.id"
        />
      </van-tab>
    </van-tabs>
  </div>
</template>

<style lang="scss" scoped>
.logo {
  height: 25px;
  object-fit: contain;
}

.swipe {
  width: 375px;
  height: 150px;
}

.van-cell {
  margin-top: 10px;
}

.classification {
  padding-top: 20px;
  margin-bottom: 10px;
  background-color: var(--bxg-bg2);

  ::v-deep() {
    .van-grid-item__content {
      padding: 0;
      padding-bottom: 20px;

      .van-image {
        width: 70px;
        height: 70px;
      }
    }
  }
}

.van-tabs {
  background-color: var(--bxg-bg2);
  // background-color: pink;
  padding-bottom: 10px;

  .van-tabs__content {
    .van-card {
      // height: 60px;
      margin: 10px;
      margin-bottom: 0;
      background-color: var(--bxg-bg1);

      ::v-deep() {
        .van-tag {
          height: 20px;
          font-size: 13px;
          background-color: red;
        }

        .van-image {
          .van-image__img {
            margin-top: 14px;
            height: 60px;
            border-radius: 0;
          }
        }

        .van-card__content {
          justify-content: center;

          .van-card__price {
            color: red;
            &-currency,
            &-integer,
            &-decimal {
              font-size: 13px;
            }
          }
          .van-card__origin-price {
            font-size: 13px;
          }
        }
      }
    }
  }
}

::v-deep() {
  .van-nav-bar__ {
    &left,
    &right {
      padding: 0 10px;
    }
  }
}
</style>
